<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8" />
  <title>示例页面</title>
  <script src="http://s0.qhimg.com/lib/jquery/183.js"></script>
  <script src="./js/ResLoad.polyfill.js"></script>
  <style>
    .progress {
      width: 600px;
      height: 20px;
      border: 3px solid red;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    .progressbar {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 100%;
      background-color: green;
      -webkit-transition: width ease-in 200ms;
    }

    .progresstext {
      position: absolute;
      top: 30px;
      right: 0;
    }

    .bg1 {
      width: 100px;
      height: 100px;
      background: url(http://p2.qhimg.com/t01ed1438874f940dc0.jpg);
    }
  </style>
</head>

<body>
  <div class="progress">
    <div class="progressbar"></div>
    <div class="progresstext">
      <span class="current"></span>/
      <span class="total"></span>
    </div>
  </div>

  <div class="bg"></div>
  <img class="img1" width=100 height=100>
  <button id="btn">bg1</button>
  <button id="btn2">add img</button>
  <button id="btn3">set src</button>

  <script>
    var loader = new ResLoader({
      resources: [
        'http://p2.qhimg.com/t01ed1438874f940dc0.jpg',
        'http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg',
        'http://p2.qhimg.com/t01dd90dfbec92074d0.jpg',
        'http://p7.qhimg.com/t01cfec6d87cde457c5.jpg',
        'http://p9.qhimg.com/t01943ced462da67833.jpg',
        'http://p0.qhimg.com/t01943ced462da67833.jpg',
        'http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg',
        'http://p8.qhimg.com/t010f1e8badf1134376.jpg',
        'http://p8.qhimg.com/t01cf37ea915533a032.jpg',
        'http://p3.qhimg.com/t0193d8a3963e1803e9.jpg',
        'http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg'
      ],
      onStart: function (total) {
        console.log('start:' + total);
      },
      onProgress: function (current, total) {
        console.log(current + '/' + total);
        var percent = current / total * 100;
        $('.progressbar').css('width', percent + '%');
        $('.progresstext .current').text(current);
        $('.progresstext .total').text(total);
      },
      onComplete: function (total) {
        alert('加载完毕:' + total + '个资源');
      }
    });

    loader.start();

    $('#btn').click(function () {
      $('.bg').addClass('bg1');
    });
    $('#btn2').click(function () {
      $('body').append('<img src="http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg" width=100 height=100 />');
    });
    $('#btn3').click(function () {
      $('.img1').attr('src', 'http://p2.qhimg.com/t01dd90dfbec92074d0.jpg');
    });
  </script>
</body>

</html>
